<template>
  <div>
    <el-tree
      :data="list"
      :props="{ label: 'name' }"
      show-checkbox
      default-expand-all
      check-strictly
      node-key="id"
      ref="tree"
    ></el-tree>
    <el-row slot="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button type="primary" @click="hSubmit">确定</el-button>
        <el-button>取消</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 1.导入所有的权限接口
import { getPermissionList } from '@/api/permisson(权限管理)'
// 2.导入平面数据转树形数据
import { transListToTerrList } from '@/utils/index(自定义功能函数)'
// 3.导入员工详细信息的接口,员工修改角色权限
import { getRolesDetail, assignPrem } from '@/api/settings(角色管理接口)'
export default {
  // 父传子
  props: {
    roleId: {
      type: String,
      required: true
    }
  },
  // 1.渲染数据
  data () {
    return {
      // 所有的权限
      list: [],
    }
  },
  // 2.事件
  methods: {
    async loadPermissionList () {
      try {
        // 获取所有的权限点
        const res = await getPermissionList()
        this.list = transListToTerrList(res.data)
        // 获取员工的信息
        let permId = await getRolesDetail(this.roleId)
        // console.log(permId, '11111')
        // 这个用法是固定的用法,需要在tree上面添加一个ref 里面传的值是 一个数组
        this.$refs.tree.setCheckedKeys(permId.data.permIds)
        // 保存数据
      } catch (err) {
        console.log('getPermissionList', err)
      }
    },
    async hSubmit () {
      try {
        // 获取terr上的节点
        const permIds = this.$refs.tree.getCheckedKeys()
        let res = await assignPrem({ id: this.roleId, permIds: permIds })
        if (res.success) {
          this.$message({
            type: 'success',
            message: res.message
          })
          // 关闭弹层 ---> 通知父组件关闭弹层
          this.$emit('success')
        }
      } catch (error) {
        console.log(error)
      }
    }
  },
  // 3.进入页面立即执行
  created () {
    this.loadPermissionList()
  }
}
</script>

<style>
</style>